<template>
	<div class="gallery">
		<!-- 每次只显示一张 current和index下标一致 -->
		<div v-show="index===current" v-for="(item,index) in gallery" :key="index" :style="{width:item.w/100+'rem',height:item.h/100+'rem'}">
			<img v-lazy="item.img_url" width="100%">
		</div>
		<div class="show_current" v-if="show_current">
			{{current+1}} /{{gallery.length}}
		</div>
	</div>
</template>

<script>
	export default {
		created() {
			setInterval(() => {
				// 每隔3000让current加1（实现了切换图片）
				this.current++;
				// 判断最大边界
				if (this.current >= this.gallery.length) {
					this.current = 0;
				}
			},3000)
		},
		data() {
			// 标识当前显示第几张幻灯片
			return {
				current: 0
			}
		},
		props: {
			// 父组件PageCom 传参过来的幻灯片数据
			gallery: {
				type: Array,
				default () {
					return [];
				}
			},
			// 是否显示指示数
			show_current:{
				type:Boolean,
				default:false,
			}
		}
	}
</script>

<style scoped="scoped">
	.gallery{
		position: relative;
	}
	.show_current{
		position: absolute;
		right: .3rem;
		bottom:.3rem;
		border-radius: 1rem;
		padding: .1rem .3rem;
		background-color:rgba(0,0,0,.4);
		color:#fff;
		font-size: .2rem;
		
	}
</style>
